<template>
  <div class="match_list table-theme">
    <head-title title="营销--搭配助手"></head-title>
    <el-card>
      <div class="top-menu">
        <div class="menu-left">
          <select-view
						:option-list="typeList"
						:value="status"
						placeholder="请选择"
						type="status"
						@value="setSelectValue"
					>
					</select-view>
          <select-view
						:option-list="orderbyList"
						:value="order_by"
						placeholder="选择类型排序"
						type="order_by"
						@value="setSelectValue"
					>
					</select-view>
         <select-view
						:option-list="sortList"
						:value="ase"
						placeholder="选择排序"
						type="ase"
						@value="setSelectValue"
					>
					</select-view>
         <select-view
						:option-list="typeLists"
						:value="match_type"
						placeholder="选择类型"
						type="match_type"
						@value="setSelectValue"
					>
					</select-view>
        </div>
        <div class="menu-right">
          <refresh-button @refresh="refreshPage"></refresh-button>
          <search-view
            :option="optionList"
            @value="goSearch"
            @clear="refreshPage"
          ></search-view>
        </div>
      </div>
      <p class="data-number">总列表数：{{ total }}</p>
      <el-table :data="list" stripe>
        <el-table-column
          label="序号"
          align="center"
          prop="match_id"
        ></el-table-column>
        <el-table-column label="头像" align="center" width="80">
          <template slot-scope="scope">
            <el-image
              :src="scope.row.user.heard_img"
              style="width: 50px; height: 50px; vertical-align: top"
            ></el-image>
          </template>
        </el-table-column>

        <el-table-column
          label="用户名"
          align="center"
          prop="user.nickname"
        ></el-table-column>
        <el-table-column
          label="电话"
          align="center"
          prop="user.phone"
        ></el-table-column>
        <el-table-column
          label="搭配名称"
          align="center"
          prop="name"
        ></el-table-column>
        <el-table-column label="封面" align="center" width="80">
          <template slot-scope="scope">
            <ImgPopover :src="scope.row.img"></ImgPopover>
          </template>
        </el-table-column>
        <el-table-column label="点赞数" align="center" prop="like">
        </el-table-column>
        <el-table-column
          label="点击数"
          align="center"
          prop="click"
        ></el-table-column>
        <el-table-column
          label="价格"
          align="center"
          prop="price"
        ></el-table-column>
        <el-table-column
          label="备注"
          align="center"
          prop="remark"
        ></el-table-column>
        <el-table-column
          label="创建时间"
          align="center"
          prop="add_time"
        ></el-table-column>
        <el-table-column label="上下架" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="2"
              @change="upDown($event, scope.row.match_id)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="排序" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sort" @blur="setSort(scope.row.match_id,scope.row.sort)"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="250">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="goMatchList(scope.row.match_id)"
              >点赞列表</el-button
            >
            <el-button
              type="primary"
              size="mini"
              @click="goFootDetails(scope.row.match_id)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="init"
          :current-page="page"
          :page-size="30"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import likeList from "@/components/layer-dialog/match_like_list.vue"
import matchDetails from '@/components/layer-dialog/match_details.vue'
import ImgPopover from '@/components/ImgPopover';
import SelectView from "@/components/SelectView";
export default {
  data() {
    return {
      optionList: [
        {
          value: 0,
          label: "序号",
        },
        {
          value: 1,
          label: "用户ID",
        }
      ],
      page: 1,
      total: 0,
      list: [],
      classSelect: 1,
      selectContent: "",
      status: 1,
      typeList: [
        {
          value:1,
          label:'上架'
        },
        {
          value:2,
          label:'下架'
        }],
      orderbyList: [
        {
          label: "时间排序",
          value: "add_time",
        },
        {
          label: "点赞排序",
          value: "like",
        },
        {
            label:"点击排序",
            value:"click"
        },
        {
          label:"大小排序",
          value:"sort"
        }
      ],
      sortList: [
        {
          value: 1,
          label: "升序",
        },
        {
          value: 2,
          label: "降序",
        },
      ],
      typeLists:[
        {
          value:1,
          label:"搭配助手"
        },
        {
          value:2,
          label:"画板"
        }
      ],
      ase:2,
      order_by:'like',
      match_id:"",
      match_type:1
    };
  },
  components: {
    likeList,
    matchDetails,
    ImgPopover,
    SelectView
  },
  methods: {
    // 清除搜索内容
    refreshPage() {
      this.page = 1;
      this.type = 0;
      this.classSelect = 1;
      this.selectContent = "";
      this.init();
    },
    // 获取搜索框
    goSearch(type, value) {
      this.selectContent = value;
      this.classSelect = type;
      this.init();
    },
    init(e) {
      this.page = e;
      let data = {
        page: e - 1 ? e - 1 : 0,
        limit: 30,
        match_id: "",
        user_id: "",
        status: this.status,
        order_by:this.order_by,
        asc:this.ase,
        match_type:this.match_type
      };
      if (this.classSelect == 0) {
        data.match_id = this.selectContent;
      } else if (this.classSelect == 1) {
        data.user_id = this.selectContent;
      }
      this.$http(this.$ApiList.MatchList, data).then((res) => {
        this.total = res.datas.count;
        this.list = res.datas.list;
      });
    },
    goFootDetails(match_id) {
      this.$layer.iframe({
        title:"搭配详情",
        maxmin:true,
        area:['70%','80%'],
        content:{
          content:matchDetails,
          parent:this,
          data:{
            id:match_id
          }
        }
      })
    },
    upDown(status, match_id) {
      let data = {
        status,
        match_id,
      };
      this.$http(this.$ApiList.MatchDown, data).then((res) => {
        this.$layer.msg("操作成功");
        this.page = 1;
        this.init();
      });
    },
    goMatchList(match_id) {
      this.$layer.iframe({
        title:"点赞列表",
        maxmin:true,
        area:['60%','70%'],
        content:{
          content:likeList,
          parent:this,
          data:{
            id:match_id
          }
        }
      })
    },
    // 设置排序
    setSort(match_id,sort){
      this.$http(this.$ApiList.MatchSort,{match_id,sort}).then(res=>{
        console.log(res);
      })
    },
    setSelectValue(obj){
				const{ type,value } = obj
				switch (type) {
          case 'status':
            this.status = value
            break
					case 'order_by':
						this.order_by = value
						break;
          case 'ase':
            this.ase = value
            break;
          case 'match_type':
            this.match_type = value
            break;
					default:
						break;
				}
				this.init()
			}
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>

</style>